function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
  // 定义一个函数，用于判断 DOM 是否加载完成
  return new Promise((resolve) => {
    // 返回一个 Promise 对象
    if (condition.includes(document.readyState)) {
      // 如果当前 DOM 的状态已经满足条件
      resolve(true) // 则直接 resolve
    }
    else {
      // 否则
      document.addEventListener('readystatechange', () => {
        // 监听 document 的 readystatechange 事件
        if (condition.includes(document.readyState))
          // 如果 DOM 的状态满足条件
          resolve(true) // 则 resolve
      })
    }
  })
}

const safeDOM = {
  // 定义一个对象，用于安全地操作 DOM
  append(parent: HTMLElement, child: HTMLElement) {
    // 定义一个 append 方法，用于向 parent 元素中添加 child 元素
    if (!Array.from(parent.children).find(e => e === child))
      // 如果 parent 元素中不存在 child 元素
      return parent.appendChild(child) // 则添加 child 元素
  },
  remove(parent: HTMLElement, child: HTMLElement) {
    // 定义一个 remove 方法，用于从 parent 元素中移除 child 元素
    if (Array.from(parent.children).find(e => e === child))
      // 如果 parent 元素中存在 child 元素
      return parent.removeChild(child) // 则移除 child 元素
  },
}

function useLoading() {
  // 定义一个函数，用于创建和移除加载动画
  const className = 'loaders-css__square-spin' // 定义加载动画的 class 名称
  const styleContent = `
@keyframes square-spin {
  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
}
.${className} > div {
  animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.app-loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #282c34;
  z-index: 9;
}
    ` // 定义加载动画的 CSS 样式
  const oStyle = document.createElement('style') // 创建一个 style 元素
  const oDiv = document.createElement('div') // 创建一个 div 元素

  oStyle.id = 'app-loading-style' // 设置 style 元素的 id
  oStyle.innerHTML = styleContent // 设置 style 元素的 innerHTML
  oDiv.className = 'app-loading-wrap' // 设置 div 元素的 class
  oDiv.innerHTML = `<div class="${className}"><div></div></div>` // 设置 div 元素的 innerHTML

  return {
    appendLoading() {
      // 定义一个 appendLoading 方法，用于添加加载动画
      safeDOM.append(document.head, oStyle) // 将 style 元素添加到 head 元素中
      safeDOM.append(document.body, oDiv) // 将 div 元素添加到 body 元素中
    },
    removeLoading() {
      // 定义一个 removeLoading 方法，用于移除加载动画
      safeDOM.remove(document.head, oStyle) // 将 style 元素从 head 元素中移除
      safeDOM.remove(document.body, oDiv) // 将 div 元素从 body 元素中移除
    },
  }
}

// ----------------------------------------------------------------------

const { appendLoading, removeLoading } = useLoading() // 获取 appendLoading 和 removeLoading 方法
domReady().then(appendLoading) // 在 DOM 加载完成后，添加加载动画

window.onmessage = (ev) => {
  // 监听 window 的 message 事件
  ev.data.payload === 'removeLoading' && removeLoading() // 如果接收到的消息的 payload 为 'removeLoading'，则移除加载动画
}

setTimeout(removeLoading, 4999) // 4.999 秒后移除加载动画

export {}
